<template>
  <div class="container">
    <div class="title" @click="showAlbum = true">{{ $route.query.name }}</div>
    <div class="box" v-if="showAlbum">
      <div class="item" v-for="(v, k) in list" :key="k" @click="toTag(v)">
        <div class="name">{{ v.AlbumName }}</div>
        <div class="mask"></div>
      </div>
    </div>
    <template v-else>
      <WaterfellHorizontal :data="pics.list" @update="update" />
    </template>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  inject,
  computed,
} from "vue";
import * as AlbumApi from "@/api/album";
import { useRoute, useRouter } from "vue-router";
import { storeUser } from "../../store/user";
import { L } from "../../../dist/assets/index.39a0e541";
import WaterfellHorizontal from "../../components/waterfell-horizontal.vue";
import bus from "../../utils/bus";
// import bus from "@/utils/bus";
export default {
  name: "",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const user = storeUser();
    const list = computed(() => {
      let i = user.RightsOfDepartments.findIndex(
        (v) => v.DepartmentID == route.query.id
      );
      if (i > -1) {
        return user.RightsOfDepartments[i].SubAlbumList;
      }
      return [];
    });
    const pics = reactive({
      list: [],
      currrentAlbum: {},
    });
    const showAlbum = ref(true);
    const params = reactive({
      CurrentUserAccount: user.UserAccount,
      PageSize: 20,
      PageIndex: 1,
      GroupID: 0,
    });
    const status = ref("");
    const count = ref(0);
    const tag = inject("tags");
    const getImg = (v) => {
      return new URL(`/src/assets/tags/${v}.png`, import.meta.url).href;
    };
    onMounted(() => {
      bus.$on("changeAlbum", () => {
        showAlbum.value = true;
      });
    });
    // watch(()=>params.GroupID,(v)=>{
    //   if(v>0){
    //   }
    // })
    const init = async () => {
      console.log(params);
      let { data: res } = await AlbumApi.getPics(params);
      pics.list = res.UserData.PictureList;
      count.value = res.UserData.PictureCount;
      nextTick(() => {
        window.onscroll = async (e) => {
          if (document.body.clientHeight - 200 - window.scrollY < 100) {
            if (status.value == "loading") return;
            if (pics.list.length >= count.value) return;
            status.value = "loading";
            params.PageIndex++;
            let { data: res } = await AlbumApi.getList(params);
            pics.list = [...pics.list, ...res.UserData.PicList];
            status.value = "end";
          }
        };
      });
    };
    const toTag = async (v) => {
      // bus.$emit("changeTheme", vThemeName);
      // router.push("/index?themeName=" + v.ThemeName + "&themeId=" + v.ThemeID);
      showAlbum.value = false;
      pics.currentAlbum = v;
      params.GroupID = v.AlbumID;
      init();
    };
    const update = () => {
      init();
    };
    return {
      tag,
      user,
      status,
      getImg,
      showAlbum,
      toTag,
      list,
      pics,
      update,
    };
  },
  components: { WaterfellHorizontal },
};
</script>
<style scoped lang="scss">
.title {
  font-weight: 600;
  font-size: 33px;
  line-height: 40px;
  cursor: pointer;
  letter-spacing: -0.02em;
  text-align: center;
  &:hover {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
}
.container {
  width: 74%;
  margin: 0 auto;
}
.box {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
  .item {
    width: 20%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    height: 10rem;
    img {
      width: 100%;
      // object-fit: cover;
      height: 100%;
    }
    &:hover {
      .mask {
        display: block;
      }
    }
    .mask {
      display: none;
      transition: 0.5s all;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
    }
    .name {
      color: #fff;
      font-size: 26px;
      font-weight: 600;
      position: absolute;
      left: 50%;
      z-index: 999;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  flex-wrap: wrap;
  &::after {
    content: "";
    // flex:1;
    margin-bottom: 20px;
    width: 20%;
    // flex: 999;
  }
}
</style>
